// stock dialogs
/*!
 * jQuery UI Dialog 1.8.21
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Dialog#theming
 */
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

.ui-dialog .ui-dialog-title {
  float: left; margin: 0 16px 0 0;
  @include fontSize(18px);
  font-weight: normal;
}
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: .3em;
  top: 50%;
  width: 19px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 18px;
  padding: 0;
  background: none;

  &:not(.ui-state-focus) {
    border-color: transparent;
  }
}
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

//our overrides

.ui-dialog {
  padding: 0;

  .ui-dialog-titlebar-close {
    right: 12px;
    width: 20px; height: 20px;
    span {
      transition: opacity 0.2s;
      background: url(/images/icon-x-black.svg) 50% 50% no-repeat;
      background-size: 10px;
      opacity: 0.6;
    }
    &.ui-state-hover, &.ui-state-focus {
      border: 1px solid;
      border-color: #16a8ff !important;
      border-radius: 3px;
      span {
        opacity: 0.8;
      }
    }
  }
}

.ui-dialog .ui-dialog-titlebar {
  padding: .4em 1em; position: relative;
  &.ui-widget-header {
    background: $ic-color-light;
    padding: 16px 12px;
    border-bottom: 1px solid $ic-border-light;
  }
}

.ui-dialog.ui-widget-content {
  border: none;
  box-shadow: 0 1px 4px 1px rgba($ic-color-dark, 0.95);
}

// note that these styles are shared in both .ui-dialog and .ui-datepicker

.ui-datepicker .ui-datepicker-time,
.ui-dialog .ui-dialog-buttonpane {
  background-color: lighten($ic-color-neutral, 5%);
  border-top: 1px solid $ic-border-light;
}

.ui-dialog .ui-dialog-buttonpane {
  padding: 6px;
  @include breakpoint(tablet) { padding: 12px; }
  .ui-dialog-buttonset button {
    margin-top: 0; margin-bottom: 0;
    &:last-of-type { margin-right: 0; }
  }
}

.ui-datepicker .ui-datepicker-header,
.ui-dialog .ui-dialog-titlebar {
  border-top: 0; border-left: 0; border-right: 0;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  font-weight: bold;
  @include fontSize(14px);
}
